import axios from "../../utils/axios";

import Alphascroll from "../../utils/pets/alphascroll/alphascroll";
import OhSnap from "../../utils/pets/oh-snap/oh-snap";

var app = getApp();
// const EXTRA_ALPHABET = ["选", "牌", "用", "热"];
const EXTRA_ALPHABET = [];
Page({
  data: {
    appslideShow: false,
    brands: {},
    initLoader: true,
    ohSnap: {
      text: ""
    },
    alphascroll: {
      alphabet: []
    },
    alphascrollShow: false,
  },
  noop() {},
  bindLetterTap(e) {
    const {
      letter
    } = e.target.dataset;
    this.ohSnap.show(letter);
    this.scrollToView(letter);
  },

  scrollToView(letter) {
    let {
      positionArr
    } = this.data
    if (letter === '#') {
      letter = 'E3';
    }
    wx.pageScrollTo({
      scrollTop: positionArr[letter],
      duration: 0
    })
  },

  onPageScroll(e) {
    let {
      scrollTop
    } = e
    let {
      windowHeight
    } = app.globalData
    let {
      alphascrollShow,
      alphascroll
    } = this.data
    const SCALE = parseInt(windowHeight) / 555
    // 获取对应高度
    if (!this.hadPositionArr) {
      this.hadPositionArr = true
      let arr = {},
        offsetTop
      let {
        alphabet
      } = alphascroll
      wx.createSelectorQuery().select('#E0').boundingClientRect((rect) => {
        offsetTop = rect.height
      }).exec()
      alphabet.map((val) => {
        val = val === '#' ? 'E3' : val
        wx.createSelectorQuery().select(`#${val}`).boundingClientRect((rect) => {
          offsetTop = val === 'E3' ? offsetTop - rect.height : offsetTop
          arr[val] = offsetTop
          offsetTop += rect.height
        }).exec()
      })
      this.setData({
        positionArr: arr
      })
    }
    // 字母锚点出现
    if (scrollTop >= 420 * SCALE) {
      if (alphascrollShow) return
      this.setData({
        alphascrollShow: true
      })
    } else {
      if (!alphascrollShow) return
      this.setData({
        alphascrollShow: false
      })
    }
  },
  // addActiveClass(){
  //     return new promiseApi(res){


  //     }

  // }



  onLoad(options) {





    this.ohSnap = new OhSnap(this);
    new Alphascroll(this, {
      onShow: (selectedLetter) => {
        this.ohSnap.show(selectedLetter);
        this.scrollToView(selectedLetter);
      },
      onTap: this.bindLetterTap
    });

    // if (app.isChooseCarMode()) {
    //     this.setData({
    //         onlyShowBrands: true,
    //     });
    // } else {
    //     this.setData({
    //         onlyShowBrands: false
    //     });
    // }


    axios('/user/pets', {
      type: options.type
    }).then(res => {
      let arr = this.toArray(res.data.result);
      let alphabet = this.data.alphascroll.alphabet;
      arr = arr.map(item => {
        item.def = item.def.toUpperCase();
        alphabet.push(item.def);
        return item;
      });
      alphabet = EXTRA_ALPHABET.concat(alphabet);
      console.log(alphabet)
      this.setData({
        brands: arr,
        initLoader: false,
        "alphascroll.alphabet": alphabet
      });
    })

  },
  toArray: function (obj, cb) {
    var result = [];
    for (var def in obj) {
      var content = obj[def];
      if (cb) {
        content = cb(obj[def]);
      }
      result.push({
        def,
        content
      });
    }
    return result;
  },
  bindBrandTap: function (e) {
    console.log(e.currentTarget.dataset.id)
    console.log(e.currentTarget.dataset.name)
    let als = {
      allpetsid: e.currentTarget.dataset.id,
      allpetsname: e.currentTarget.dataset.name
    }
    app.globalData.allpets = als
    app.globalData.allpets.is_refresh = true
    wx.navigateBack({
      delta: 1
    })
    // allpets
  }
});